<script setup>
import { computed } from 'vue'
import { useStore } from './vuex/index'

const store = useStore()
console.log(store)
store.dispatch('getUserInfo', 1)
store.dispatch('getAward', 1)

const userInfo = computed(() => {
  return store.state.userInfo
})
</script>
<template>
  <div class="outer">
    <div class="user-info">
      <p>{{ `姓名:${userInfo.name}` }}</p>
      <p>{{ `年龄:${userInfo.age}` }}</p>
      <p>{{ `性别:${userInfo.sex}` }}</p>
      <p>{{ `学校:${userInfo.school}` }}</p>
    </div>
    <div class="awards">
      <p>{{`获奖数量:${store.getters.numberOfAwardsReceived}`}}</p>
    </div>
  </div>
</template>

<style scoped>
.outer {
  width: 400px;
  margin: 100px auto 0;
}
</style>
